<template>
	<view>
		<view class='logistics'>
			<view class='header acea-row row-between row-top'>
				<view class='pictrue'>
					<image :src='image'></image>
				</view>
				<view class='text acea-row row-between'>
					<view class='name'>
						<view class="h1 line2">{{storeName}}</view>
						<view class="h2">{{suk}}</view>
					</view>
					<view class='money'>
						<view>￥{{$util.moneyChange(price)}}</view>
						<view class="h2">x{{cartNum}}</view>
					</view>
				</view>
			</view>
			<view class='logisticsCon' v-for="(item,index) in expressList" :key="index">
				<view class='company acea-row row-between-wrapper'>
					<view class='picTxt acea-row row-between-wrapper'>
						<view class='iconfont iconwuliugenzong1'></view>
						<view class='text'>
							<view class='listWarp acea-row row-between row-center'>
								<text>{{item.deliveryCompany}}</text>
								<view class="jieduanName">{{item.name?item.name:''}}</view>
							</view>
							<view class='listWarp acea-row row-between row-center'>
								<text style="line-height: 42rpx;">{{item.deliveryNumber}}</text>
								<view class='copy' @tap='copyWeiXin(item.deliveryNumber)'>{{$t("order.copyTheTrackingNumber")}}</view> <!--复制单号-->
							</view>
						</view>
					</view>
				</view>
				<view class="dataListWarp">
					<uni-transition :mode-class="['fade']" :show="item.showList">
						<view class='item' v-for="(res,i) in item.dataList" :key="i">
							<view class='circular' :class='i === 0 ? "on iconfont iconzhifuchenggong1":""'></view>
							<view class='text' :class='i===0 ? "on-font on":""'>
								<view>{{JSON.parse(res).context}}</view>
								<view class='data' :class='i===0 ? "on-font on":""'>{{JSON.parse(res).time}}</view>
							</view>
						</view>
					</uni-transition>
				</view>
				<view class="bthClick" v-if="!item.showList" @click="bandShowList(index)">{{$t("order.expandToSeeDetails")}}</view><!--展开查看详情-->
				<view class="bthClick" v-if="item.showList" @click="bandShowList(index)" style="padding-top: 30rpx;">{{$t("order.putAway")}}</view><!--收起-->

			</view>
		</view>
	</view>
</template>

<script>
	import {
		deliveryList,
		deliveryQueryShowApi
	} from '@/api/order.js';
	export default {
		data() {
			return {
				image: "",
				storeName: "",
				suk: "",
				price: "",
				cartNum: "1",
				orderInfoId: "",

				expressList: [],
			};
		},
		onLoad: function(options) {
			var that = this
			if (!options.orderInfoId) return that.$util.Tips({
				title: '缺少订单号'
			});
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif

			eventChannel.on('orderGoods', function(data) {
				var dataAll = data.data
				that.orderInfoId = dataAll.orderInfoId;
				that.image = dataAll.image;
				that.storeName = dataAll.storeName;
				that.suk = dataAll.suk;
				that.price = dataAll.price;
				that.cartNum = dataAll.cartNum;
				that.getExpress();
			})
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.logisticsInformation')
			});
		},
		methods: {
			getExpress: function() {
				let that = this;
				deliveryList({
					orderInfoId: that.orderInfoId
				}).then(function(res) {
					console.log(res, "物流分段信息")
					var dataAll = res.data
					dataAll.forEach(item => {
						item.showList = false
						item.dataList = []
					})
					that.$set(that, 'expressList', dataAll || []);
					that.bandShowList(0)
				});
			},
			bandShowList(index) {
				var that = this
				if (that.expressList[index].dataList && that.expressList[index].dataList.length != 0) {
					that.expressList[index].showList = !that.expressList[index].showList
				} else {
					deliveryQueryShowApi({
						id: that.expressList[index].id
					}).then(function(res) {
						console.log(res, "物流信息")
						that.expressList[index].showList = true
						if (res.data){
							var datas = res.data.data
							that.expressList[index].dataList = res.data.data
						}else{
							that.expressList[index].dataList = []
						}
					}).catch(err => {
						console.log(err, "失败信息")
						that.expressList[index].showList = true
						that.expressList[index].dataList = [`{"context": ${that.$t("order.merchantHasShipped")},"time":""}`]
					})
				}
				console.log(that.expressList)
			},
			//复制单号
			copyWeiXin(val) {
				var that = this
				// #ifdef H5
				that.$copyText(val).then(e => {
					uni.showToast({
						title: that.$t("order.copySuccessfully"),
						icon: "none",
						duration: 1000
					})
				}, e => {
					uni.showToast({
						title: that.$t("order.replicationFailed"),
						icon: "none",
						duration: 1000
					})
				})
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: val
				});
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.logistics .header {
		padding: 30rpx 30rpx;
		background-color: #fff;
		height: 191rpx;
		box-sizing: border-box;
	}

	.logistics .header .pictrue {
		width: 130rpx;
		height: 130rpx;
	}

	.logistics .header .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.logistics .header .text {
		width: 540rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.logistics .header .text .name {
		width: 365rpx;
	}

	.logistics .header .text .h2 {
		font-size: 24rpx;
		font-weight: 300;
		margin-top: 10rpx;
	}

	.logistics .header .text .money {
		text-align: right;
	}

	.logistics .logisticsCon {
		background-color: #fff;
		margin: 12rpx 0;
	}

	.logistics .logisticsCon .company {
		height: 140rpx;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.logistics .logisticsCon .company .picTxt {
		width: 100%;
	}

	.logistics .logisticsCon .company .picTxt .iconfont {
		text-align: center;
		line-height: 80rpx;
		color: #DAB56D;
		font-size: 80rpx;
	}

	.logistics .logisticsCon .company .picTxt .text {
		width: calc(100% - 100rpx);
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
	}

	.logistics .logisticsCon .company .picTxt .text .listWarp:nth-child(1) {
		margin-bottom: 6rpx;
	}

	.logistics .logisticsCon .company .picTxt .text .listWarp .copy {
		font-size: 20rpx;
		width: 106rpx;
		height: 42rpx;
		text-align: center;
		line-height: 42rpx;
		border-radius: 8rpx;
		background-color: #000;
		color: #fff;
	}

	.logistics .logisticsCon .bthClick {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4C84D8;
		line-height: 37rpx;
		text-align: center;
		padding: 0 0 30rpx 0;
	}

	.logistics .logisticsCon .dataListWarp {
		padding-top: 30rpx;
	}

	.logistics .logisticsCon .item {
		padding: 0 30rpx;
		position: relative;
		transition: .5s ease;
	}

	.logistics .logisticsCon .item .circular {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		position: absolute;
		top: -1rpx;
		left: 26.5rpx;
		background-color: #E6E6E6;
		z-index: 2;
	}

	.logistics .logisticsCon .item .circular.on {
		width: 34rpx;
		height: 34rpx;
		left: 14.5rpx;
		color: #DAB56D;
	}

	.logistics .logisticsCon .item .text.on-font {
		color: #DAB56D;
	}

	.logistics .logisticsCon .item .text .data.on-font {
		color: #DAB56D;
	}

	.logistics .logisticsCon .item .text {
		font-size: 28rpx;
		color: #999;
		width: 670rpx;
		border-left: 1rpx solid #e6e6e6;
		padding: 20rpx 0 20rpx 38rpx;
		position: relative;
	}

	.logistics .logisticsCon .item .text::before {
		content: "";
		display: block;
		width: 630rpx;
		height: 1px;
		background: #E6E6E6;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.logistics .logisticsCon .item .text.on {
		border-left-color: #DAB56D;
	}

	.logistics .logisticsCon .item .text .data {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.logistics .logisticsCon .item .text .data .time {
		margin-left: 15rpx;
	}
</style>
